<script setup>
import { ref, watch } from 'vue'
import getDate from '@/utils/dateChange.js'
import useAttractionsStore from '@/store/attractions/index.js'
import router from '@/router/index.js'
import AttractionDetailDialog from '@/views/system/attractions/detail/AttractionPreviewDialog.vue'  // 引入弹框组件

const atractionsStore = useAttractionsStore()

defineProps({
  newsList: {
    type: Array,
    default: () => []
  }
})

//定义分页器
const page = ref(1)
const size = ref(10)

//分页器事件
const handleSizeChange = () => {
  atractionsStore.getAttractionsList(page.value, size.value)
}

const handleCurrentChange = () => {
  atractionsStore.getAttractionsList(page.value, size.value)
}

//删除单个景点
const deleteBtn = async (id) => {
  await atractionsStore.removeAttrById(id)
  await atractionsStore.getAttractionsList(page.value, size.value)
}

//添加景点
const addBtn = () => {
  router.push('/main/atractions/add')
}
// 添加弹框组件的ref
const detailDialogRef = ref(null)
//查看详情
const detailBtn = async (id) => {
  // 获取景点详情数据
  const details = await atractionsStore.getAttractionDetail(id)
  console.log('Details:', details) // 调试用
  // 确保弹框组件的 ref 已经正确引用
  console.log('Dialog ref:', detailDialogRef.value)

  if (detailDialogRef.value) {
    // 弹出详情弹框
    detailDialogRef.value.showDialog(details.data)
  }
}
const modifyBtn = async (id) => {
    router.push({
        path: "/main/atractions/add",
        query: { id:id },
    });
    console.log('参数是',router)
};





//批量删除
const attrIds = ref()
const handleSelectionChange = (ids) => {
  attrIds.value = ids.map((item) => item.id)
  console.log('attrIds', attrIds.value)
}

const isDisabled = ref(true)
watch(attrIds, (newValue) => {
  isDisabled.value = newValue.length === 0
})

const deleteBatchBtn = async () => {
  await atractionsStore.removeBatchByAttractionIds(attrIds.value)
  atractionsStore.getAttractionsList(page.value, size.value)
}
</script>

<template>
  <div class="content">
    <div class="header">
      <el-button @click="addBtn" type="primary" plain>
        <el-icon>
          <Plus />
        </el-icon>
        <span>新增</span>
      </el-button>
      <el-popconfirm @confirm="deleteBatchBtn" title="确定要批量删除吗?">
        <template #reference>
          <el-button :disabled="isDisabled" type="danger" plain>
            <el-icon>
              <Delete />
            </el-icon>
            <span>批量删除</span>
          </el-button>
        </template>
      </el-popconfirm>
    </div>

    <!-- 表格内容 -->
    <el-table
      @selection-change="handleSelectionChange"
      ref="tableRef"
      :data="newsList"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" property="id" label="序号" width="80" />
      <el-table-column align="center" property="scenicName" label="景点名称" width="200" />
      <el-table-column align="center" property="scenicPic" label="图片">
        <template #default="scope">
          <img style="width: 300px" height="200px" :src="scope.row.scenicPic" />
        </template>
      </el-table-column>
      <el-table-column align="center" property="scenicAddress" label="景点地址" />
      <el-table-column align="center" property="userName" label="作者" />
      <el-table-column align="center" property="status" label="状态" width="100px">
        <template #default="scope">
          <el-button :type="scope.row.status ? 'primary' : 'danger'" plain>
            {{ scope.row.status ? '开放' : '关闭' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" property="createTime" label="发布时间">
        <template #default="scope">
          {{ getDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300px">
        <template #default="scope">
          <el-button type="primary" text="primary" @click="detailBtn(scope.row.id)">查看</el-button>
          <el-button type="primary" text="primary" @click="modifyBtn(scope.row.id)">修改</el-button>
          <el-popconfirm @confirm="deleteBtn(scope.row.id)" title="确定要删除吗?">
            <template #reference>
              <el-button type="danger" text="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="atractionsStore.attractionsList.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 引入并使用弹框组件 -->
    <AttractionDetailDialog ref="detailDialogRef" />
  </div>
</template>

<style scoped lang="less">
.content {
  padding: 0 15px 0 15px;

  .header {
    margin-bottom: 10px;
  }

  .el-pagination {
    margin-top: 20px;
  }
}
</style>
